<template>
  <div class="like">
    <div class="like-title">
      <img class="like-img" src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="">
      <span class="like-txt">猜你喜欢</span>
    </div>
    <ul class="like-list">
      <router-link tag="li" class="like-item border-bottom" v-for="item of likeList" :key="item.id" :to="'/detail/'+ item.id">
          <div class="like-top-icon" :style="{backgroundImage:item.bgUrl}" v-if="showStatus">{{item.status}}</div>
          <div class="like-item-img">
            <img :src="item.imgUrl" alt="">
          </div>
          <div class="like-item-content">
            <div class="item-info">{{item.title}}</div>
            <div class="grade">
              <span class="star"><strong class="score iconfont">&#xe60b;&#xe60b;&#xe60b;&#xe60b;&#xe60b;</strong></span>
              &nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">{{item.commentNum}}条评论</span>
            </div>
            <div class="price"><span class="money">&yen;<em class="num">{{item.price}}</em></span>起<span class="area">{{item.area}}</span></div>
            <div class="like-desc"><div class="like-detail">{{item.desc}}</div></div>
          </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeLike',
  props: {
    likeList: Array
  },
  methods: {
    showStatus () {
      for (let i = 0; i < this.likeList.length; i++) {
        if (this.likeList[i].bgUrl) {
          return this.likeList[i].bgUrl
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .like
    margin-top .2rem
    background #fff
    .like-title
      padding .24rem 0 .26rem
      .like-img
        display inline-block
        width .3rem
        height .3rem
        vertical-align top
        margin-left .24rem
      .like-txt
        font-size .32rem
        color $txtColor
        height .44rem
        line-height .44rem
    .like-list
      margin-left .24rem
      .like-item
        padding .2rem 0
        position relative
        .like-top-icon
          position: absolute
          left 0
          top .2rem
          background-size 100%
          width 1.02rem
          height: .38rem
          line-height .38rem
          font-size .2rem
          text-indent .04rem
          color #fff
        .like-item-img
          float left
          width 2rem
          height 0
          padding-bottom 2rem
          overflow hidden
        .like-item-img img
          width 100%
        .like-item-content
          overflow hidden
          padding-left .22rem
          .item-info
            height .44rem
            line-height .44rem
            margin-top .14rem
            font-size .32rem
            color $txtColor
          .grade
            margin-top .14rem
            line-height .34rem
            .star
              position: relative
              display inline-block
              width 1.66rem
              font-size .28rem
              height .28rem
              line-height .28rem
              color #ffb436
              .score
                position: absolute
                top 0
                left 0
            .comment
              font-size .24rem
              color #616161
              line-height .34rem
              vertical-align text-bottom
          .price
            position: relative
            color #616161
            font-size .24rem
            margin-top .22rem
            line-height .4rem
            .money
              color #ff8300
              .num
                font-size .4rem
            .area
              position absolute
              right .24rem
              bottom 0
          .like-desc
            diplay inline-block
            color #f55
            background #fff
            font-size .24rem
            margin-top .48rem
            padding .04rem .1rem
            line-height .34rem

</style>
